import Image from 'next/image'
import { useImagePlaceholder } from '../hooks/useImagePlaceholder'
import { Link } from '@/src/navigation'

interface CaseItemProps {
  id: string
  picture: string
  title: string
  desc: string
}

const Case: React.FC<CaseItemProps> = async (props) => {
  const { id, picture, title, desc } = props
  const { base64 } = await useImagePlaceholder(picture)
  return (
    <Link href={`/case-detail/${id}`} className='relative flex flex-col'>
      <div className='aspect-w-[69] aspect-h-[41] lg:aspect-w-1 lg:aspect-h-1'>
        <Image
          src={picture}
          alt='picture'
          fill
          style={{ objectFit: 'cover' }}
          sizes='(max-width: 1024px) 92vw, (max-width: 1536px) 25vw, 25vw'
          placeholder='blur'
          blurDataURL={base64}
        />
      </div>
      <div className='absolute left-0 bottom-0 flex flex-col bg-white px-4 pt-[0.875rem] pb-3 w-[91%] lg:w-[88%]'>
        <div className='text-[#A6C32D] font-bold text-[1rem] leading-[1.5625rem] lg:text-[0.8125rem] lg:leading-[0.8125rem] 2xl:text-[1.21875rem] 2xl:leading-[1.21875rem]'>
          {title}
        </div>
        <div className='h-1' />
        <div className='text-[0.875rem] leading-[1rem] lg:text-[0.75rem] lg:leading-[1.1875rem] 2xl:text-[1.125rem] 2xl:leading-[1.78125rem] line-clamp-3'>
          {desc}
        </div>
      </div>
    </Link>
  )
}

export default Case
